<template>
  <div id="app">
    <div class="box">
      <p class="welcome">Welcome</p>
      <!-- <img class="fox" src="../assets/下载.svg" alt="" srcset="" /> -->
      <div>
        <!-- 只要用户选好了图片，就会自动把图片发送到action对应的url地址去 -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/upload/pic"
          :show-file-list="false"
          :on-success="avatarSuccess"
        >
          <!-- 是回显的图片标签
        v-if:没有值不显示这个img
        :src：绑定src属性 绑定user下面的avatar属性
         -->
          <img v-if="user.avatar" :src="user.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="wrap">
        <div class="user-input">
          <el-input
            v-model="user.userName"
            @blur="checkedUserName"
            placeholder="请输入用户账号"
            prefix-icon="el-icon-user"
          ></el-input>
        </div>

        <div class="user-input">
          <el-input
            v-model="user.passWord"
            placeholder="请输入用户密码"
            prefix-icon="el-icon-key"
            show-password
          ></el-input>
        </div>
        <div class="user-input">
          <el-input
            v-model="user.nickName"
            placeholder="请输入用户昵称"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </div>

        <div class="user-input">
          <el-input
            v-model="user.email"
            @blur="checkedEmail"
            placeholder="请输入用户邮箱"
            prefix-icon="el-icon-s-promotion"
          ></el-input>
        </div>
      </div>
      <button @click="register" type="submit" id="btn">
        <h1>注册</h1>
      </button>
      <a @click="login" id="login" href="">去登录</a>
    </div>
  </div>
</template>

<script>
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    return {
      user: {
        userName: "",
        passWord: "",
        nickName: "",
        email: "",
        avatar: "",
      },
    };
  },
  methods: {
    //头像上传成功后就会执行这个函数 ，即页面发送请求以后 java返回响应后 java回传的结果集在这个函数
    avatarSuccess(res, file) {
      this.user.avatar = res.data;
    },
    //注册按钮点击事件
    register() {
      //1.要在页面判断非空 但不做了
      //2.校验数据合法性 因为要省事 做java校验就行了
      //3.发axios请求
      this.$http.post("/user/register", this.user).then((res) => {
        this.$message({
          message: "注册成功",
          type: "success",
        });
        //跳转到登录页面去
        this.$router.push("/");
      });
    },
    //@blur失去焦点事件
    //一个url路径做数据校验 只是传的参数不一样 所以校验的规则不一样
    checkedUserName() {
      // 要在页面判断非空，防止发送请求后404提示网络超时
      if(this.user.userName.trim()==""||this.user.userName==null||this.user.userName==undefined){
          this.$message.error('用户名不能为空');
          return;
      }

      this.$http
        .post("/user/checked/" + this.user.userName + "/1")
        .then((res) => {
          this.$message({
            message: "账号名可用",
            type: "success",
          });
        });
    },
    checkedEmail() {
      if(this.user.email.trim()==""||this.user.email==null||this.user.email==undefined){
          this.$message.error('邮箱不能为空');
          return;
      }

      this.$http
        .get("/user/checked/" + this.user.email + "/2")
        .then((res) => {
          this.$message({
            message: "邮箱可用",
            type: "success",
          });
        });
    },
    login(){
      this.$router.push("/");
    }
  },
};
</script>
<style scoped>
#app {
  background-color: #ffd1b7;
  overflow: hidden;
}
.box {
  position: relative;
  border-bottom: 3px solid #fb966f;
  border-right: 3px solid #fb966f;
  background-color: #fee4d4;
  height: 400px;
  width: 700px;
  margin: 150px auto;
  box-shadow: 10px 10px 6px 2px rgb(251 150 108 / 60%);
  overflow: hidden;
}

.welcome {
  position: absolute;
  color: #302825;
  left: 30%;
  top: 17%;
  font-weight: bolder;
  font-size: xx-large;
}

.form {
  height: 100%;
}

.wrap {
  display: flex;
  justify-content: center;
  margin-top: 65px;
  font-size: 15px;
  align-items: center;
  flex-direction: column;
  height: 300px;
}

.user-input {
  width: 300px;
  padding: 5px 20px;
}

#btn {
  background: #302825;
  position: absolute;
  width: 120px;
  top: 80%;
  right: 40%;
  padding: 5px;
  border-radius: 10px;
  border: none;
  color: #fff;
  font-size: 12px;
}

#btn:hover {
  color: #f45f34;
}
#login {
  color: #302825;
  position: absolute;
  top: 90%;
  right: 45%;
}
#login:hover {
  color: #f45f34;
  text-decoration: underline;
}
/* .fox {
  position: absolute;
  top: 12%;
  left: 58%;
  height: 18%;
} */

/* 头像样式 */
.avatar-uploader :deep() .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 3%;
  left: 58%;
  width: 100px;
  height: 100px;
}
.avatar-uploader :deep() .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>